<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 2px solid #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="" width="500" height="300"></canvas>
		<script type="text/javascript">
			var c = document.querySelector("canvas")
			var cs = c.getContext("2d")
			
			cs.strokeStyle = "#0F3975"
			// cs.fillStyle = "#0F3975"
			
			cs.moveTo(10,100)
			cs.lineTo(10,200)
			cs.moveTo(10,150)
			cs.lineTo(80,150)
			cs.moveTo(80,100)
			cs.lineTo(80,200)
			
			cs.moveTo(90,100)
			cs.lineTo(190,100)
			cs.moveTo(140,100)
			cs.lineTo(140,200)
			
			cs.moveTo(200,200)
			cs.lineTo(225,100)
			cs.lineTo(250,200)
			cs.lineTo(275,100)
			cs.lineTo(300,200)
			
			cs.moveTo(310,100)
			cs.lineTo(310,200)
			cs.moveTo(310,200)
			cs.lineTo(390,200)
			
			cs.moveTo(410,100)
			cs.lineTo(480,100)
			cs.moveTo(410,100)
			cs.lineTo(410,150)
			//圆心 x y 半径 起点弧度 终点弧度 顺时针（false） 逆时针（true）
			cs.arc(410,175,25,1.5*Math.PI,0.5*Math.PI,false)
			
			
			
			
			// cs.moveTo(410,150)
			// cs.lineTo(480,150)
			// cs.moveTo(480,150)
			// cs.lineTo(480,200)
			// cs.moveTo(480,200)
			// cs.lineTo(410,200)
			
			cs.stroke()
			// cs.fill()
		</script>
	</body>
</html>
